<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>平台钱包管理</el-breadcrumb-item>
        <el-breadcrumb-item>平台钱包列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.txid" placeholder="交易ID" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.userName" placeholder="用户名" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.address" placeholder="地址" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.msgState" clearable placeholder="状态" style="width: 100px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.satrtDate" type="datetime" placeholder="开始日期" default-time="12:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.endDate" type="datetime" placeholder="结束日期" default-time="12:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="books" highlight-current-row @selection-change="selsChange" style="width: 100%;" show-summary :summary-method="getSummaries" >
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="txid" label="交易ID" width="300"></el-table-column>
        <el-table-column prop="fromWalletAddress" label="输出地址" width="300"></el-table-column>
        <el-table-column prop="walletAddressHash" label="输入地址" width="300"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
        <el-table-column prop="amount" label="金额" width="100"></el-table-column>
        <el-table-column prop="txFee" label="矿工费" width="100"></el-table-column>
        <el-table-column prop="height" label="高度" width="100"></el-table-column>
        <el-table-column prop="sendtoaddressFree" label="源地址发送bitcoin" width="200"></el-table-column>
        <el-table-column prop="accountType" label="币种" width="80">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.type === 'USDT' ? 'success' : 'primary' "
              disable-transitions>{{scope.row.accountType}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="msgState" label="状态" width="80"  :filters="[{ text: '已发送', value: '已发送' }, { text: '未发送', value: '未发送' }]"
                          :filter-method="filterTag" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
            :type="scope.row.msgState === '已发送' ? 'success':'danger' "
            disable-transitions>{{scope.row.msgState}}
            </el-tag>
        </template>
        </el-table-column>
        <el-table-column prop="timestamp" label="交易时间" width="150" sortable :formatter="dateFormat"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150" sortable :formatter="dateFormatNew"></el-table-column>
      </el-table>

      <!--工具条-->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]"
                       :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-col>
  </el-row>
</template>
<script>
  import util from '../../common/util'
  import API from '../../api/api_user';
  import moment from 'moment';
  export default{
    data(){
      return {
        filters: {
          txid: '',
          userName: '',
          msgState: '',
          address: '',
          satrtDate:'',
          endDate:''
        },
        options: [{
          value: '1',
          label: '已发送'
        }, {
          value: '2',
          label: '未发送'
        }],
        books: [],
        total: 0,
        currentPage: 1,
        limit: 10,
        loading: false,
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.currentPage = val;
        this.search();
      },
      handleSearch(){
        this.total = 0;
        this.currentPage = 1;
        this.search();
      },
      handleSizeChange(val) {
        this.limit = val;
        this.search();
      },
      formatState: function (row, column) {
        return row.msgState == 1 ? '发送' : row.msgState == 0 ? '未发送' : '未知';
      },
      //时间格式化
      dateFormat: function (row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss");
      },
      //时间格式化ew
      dateFormatNew: function (row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },

      filterTag(value, row) {
        return row.type === value;
      },
      search(){
        let that = this;
        let params = {
          pageNum: that.currentPage,
          pageSize: that.limit,
          txid: that.filters.txid,
          userName: that.filters.userName,
          msgState: that.filters.msgState,
          address:that.filters.address
        };

        that.loading = true;
        API.withdrawEntry(params).then(function (result) {
          that.loading = false;
          console.log(result);
          if (result && result.list) {
            that.total = result.count;
            that.books = result.list;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      //合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value)) && column.property=="amount" ||column.property=="txFee"
            ||column.property=="absentFee" ||column.property=="sendtoaddressFree") {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' ';
          } else{
            sums[index] = '';
          }
        });

        return sums;
      }
    },
    mounted() {
      this.handleSearch()
    }
  }
</script>

<style>
  .demo-table-expand label {
    font-weight: bold;
  }
</style>
